<template>
  <transition name="fade-opacity">
    <div v-show="showModal" class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-justify-center c-aligni-end">
      <div class="c-translucent-balck50 c-text-hidden c-pz-1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="closeModal" data-type='cancel'></div>
      <transition name="fade-translate-y">
        <div v-show="showModal" class="c-w100 c-bg-white c-flex-column c-pt40 c-pz1 c-br-tl30 c-br-tr30">
          <header class="c-flex-row c-flex-center c-fc-xblack c-p">
            <div class="c-fs28 c-fc-xblack c-fw-b c-p">
              邀请达人榜
              <div class="invite-title-bottom"></div>
            </div>
            <div class="invite-rules" @click="showRuleModal = true">邀请规则</div>
          </header>
          <section class="c-flex-row c-aligni-center c-pt30 c-pb20 c-ph24 c-fc-sgray c-fs22">
            <div class="c-ww50">排名</div>
            <div class="c-flex-grow1 c-w0 c-pl60">姓名</div>
            <div class="c-ww100 c-textAlign-r">邀请人数</div>
          </section>
          <div class="c-hh540 c-contexty-scroll c-p c-ph24">
            <div class="c-flex-row c-aligni-center c-pb30" v-for="(item,index) in inviteList" :key="index">
              <div class="c-ww50 c-flex-row c-flex-center" v-if="index == 0 || index == 1 || index == 2">
                <img v-if="index == 0" class="c-ww30" :src="require('@/assets/i/wap/socail/icon_rank1.png')" alt="" />
                <img v-else-if="index == 1" class="c-ww30" :src="require('@/assets/i/wap/socail/icon_rank2.png')" alt="" />
                <img v-else class="c-ww30" :src="require('@/assets/i/wap/socail/icon_rank3.png')" alt="" />
              </div>
              <div v-else class="c-ww50 c-textAlign-c c-fc-gray c-fs22">{{index * 1 + 1}}</div>
              <div class="c-flex-grow1 c-w0 c-flex-row c-aligni-center c-pl60">
                <img class="c-ww60 c-hh60 c-brp50 c-fc-xblack c-fs22" :src="$addXossFilter(item.headimgurl || require('@/assets/defult_head.png'))" alt="" />
                <span class="c-pl10 c-text-ellipsis1 c-fs22">{{item.realName || item.nickname}}</span>
              </div>
              <div class="c-ww100 c-textAlign-r c-fs24 c-fw-b c-fc-xblack">{{item.inviteNum}}</div>
            </div>
          </div>
          <footer v-if="myInvInfo" class="c-hh100 c-flex-row c-aligni-center footer c-ph24">
            <img :src="$addXossFilter(myInvInfo.headimgurl || require('@/assets/defult_head.png'))" class="c-ww60 c-hh60" alt="头像" />
            <div class="c-pl20 c-flex-grow1 c-w0">
              <div class="c-pb16 c-fs22 c-fc-xblack">{{myInvInfo.realName || myInvInfo.nickname}}</div>
              <div v-if="myInvInfo.inviteNum * 1 > 0" class="c-fs20 c-fc-sblack">
                <span>邀请：</span>
                <span class="c-fc-green">{{myInvInfo.inviteNum}}</span>
                <span>人，</span>
                <span class="c-pl4">排行：</span>
                <span class="c-fc-green">{{myInvInfo.inviteRank}}</span>
              </div>
              <div class="c-fs20 c-fc-sblack" v-else>暂未邀请好友参与群聊</div>
            </div>
            <div @click="clickInvite" class="c-flex-row c-flex-center c-ww88 c-hh40 c-br20 c-bg-lg120-xgreen c-fs20 c-fc-white">
              邀请
            </div>
          </footer>
        </div>
      </transition>
      <!-- 邀请规则弹窗 -->
      <div v-show="showRuleModal" class="c-translucent-balck50 c-text-hidden c-pz6 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="showRuleModal = false" data-type='cancel'></div>
      <section v-show="showRuleModal" class="c-pa c-p-l0 c-p-b0 c-w100 c-bg-white c-flex-column c-ph52 c-pb60 c-pz7 c-br-tl10 c-br-tr10">
        <div class="c-pv50 c-fs26 c-textAlign-c">只需三步，轻松登上邀请达人榜</div>
        <div class="c-flex-row c-justify-sb c-fs12">
          <div class="c-flex-column c-flex-center">
            <i class="iconfont c-fc-green c-fs40">&#xe769;</i>
            <div class="c-pt16 c-fs20">加入群聊</div>
          </div>
          <div class="c-flex-row c-pt16 c-opacity30">
            <div class="c-ww10 c-hh10 c-brp50 c-mr8 c-bg-vgreen"></div>
            <div class="c-ww10 c-hh10 c-brp50 c-mr8 c-bg-vgreen"></div>
            <div class="c-ww10 c-hh10 c-brp50 c-bg-vgreen"></div>
          </div>
          <div class="c-flex-column c-flex-center">
            <i class="iconfont c-fc-green c-fs40">&#xe982;</i>
            <div class="c-pt16 c-fs20">邀请好友入群</div>
          </div>
          <div class="c-flex-row c-pt16 c-opacity30">
            <div class="c-ww10 c-hh10 c-brp50 c-mr8 c-bg-vgreen"></div>
            <div class="c-ww10 c-hh10 c-brp50 c-mr8 c-bg-vgreen"></div>
            <div class="c-ww10 c-hh10 c-brp50 c-bg-vgreen"></div>
          </div>
          <div class="c-flex-column c-flex-center">
            <i class="iconfont c-fc-green c-fs40">&#xe981;</i>
            <div class="c-pt16 c-fs20">好友进群</div>
          </div>
        </div>
      </section>
    </div>
  </transition>
</template>

<script>
import { utilJs } from "@/utils/common.js";
export default {
  components: {
  },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    socialRoomId: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      inviteList: [],
      myInvInfo: null,
      showRuleModal: false,
    };
  },
  watch: {
    showModal: {
      handler(val, oldVal) {
        this.curAnsweIndex = -1;
        this.showRuleModal = false;
        if (val) {
          this.getInviteList();
        }
      }
    },
  },
  methods: {
    closeModal(e) {
      this.$emit("closedModal");
    },
    getInviteList() {
      utilJs.getMethod(`${global.apiurl}social/inviteList?socialId=${this.socialRoomId}`, res => {
        this.myInvInfo = res.myRank;
        this.inviteList = res.rank.data;
      });
    },
    clickInvite() {
      this.closeModal();
      this.$emit('clickInvite')
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.invite-title-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0.3rem;
  width: 100%;
  background: rgba(102, 204, 51, 0.5);
}
.footer {
  box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.05);
}
.invite-rules {
    position: absolute;
    right: 0;
    top: 0;
    height: 1.2rem;
    padding: 0 0.3rem;
    background: #fff;
    border-radius: 0.55rem 0 0 0.55rem;
    box-shadow: 0 0.15rem 0.5rem 0 rgba(0,0,0,0.05);
    color: #66CC33;
    font-size: 0.55rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
